<script setup>
import {nextTick, onMounted, ref} from "vue";
import {Delete, Edit, Plus, Refresh, Tickets} from "@element-plus/icons-vue";
import DictDialogForm from "./component/Form.vue"
import DictItemListDialog from "./component/ItemList.vue"
import {ElMessageBox} from "element-plus";
import { add, edit, pageList, deleteById } from '@/api/system/dict.js'

defineOptions({
  name: '/system/dict'
})

const search = ref({
  name: '',
  status: '',
  pageNum: 1,
  pageSize: 10,
  total: 0
})

const statusEnum = ref([
  {label: "启用", value: 1},
  {label: "禁用", value: 2}
])

const dict = ref({
  id: "",
  name: "",
  keyName: "",
  status: "",
  remark: "",
  createTime: ""
})

const dictData = ref([
  {id: 1, name: "性别", keyName: "sex", items: [{id: 11, name: "男", sort: 1, createTime: "2024-07-19 12:27:00"}, {id: 12, name: "女", sort: 2, createTime: "2024-07-19 12:27:00"}], status: 1, remark: "性别字典", createTime: "2024-07-19 12:27:00"}
])

const dictItemData = ref([])

const searchFormRef = ref(null)

const dictDialogFormRef = ref(null)

const dictDialogFormVisible = ref(false)

const dictItemDialogVisible = ref(false)

//请求分页
const requestPageList = () => {
  pageList(search.value).then(resp => {
    search.value.total = Number.parseInt(resp.data.total)
    dictData.value = resp.data.data
  })
}

onMounted(() => {
  requestPageList()
})

const onReset = () => {
  search.value.pageNum = 1
  searchFormRef.value.resetFields()
  requestPageList()
}

const onSearch = () => {
  requestPageList()
}

const onAdd = () => {
  dict.value = {
    id: "",
    name: "",
    keyName: "",
    status: "",
    remark: "",
    createTime: ""
  }
  dictDialogFormVisible.value = true
}

const onEdit = (rowData) => {
  dict.value = {...rowData}
  dictDialogFormVisible.value = true
}

const handleCurrentChange = (currentPage) => {
  search.value.pageNum = currentPage
}

const handelDictDialogFormConfirm = async (data) => {
  if (data.id) {
    await edit(data)
  } else {
    await add(data)
  }
  requestPageList()
  dictDialogFormVisible.value = false
}

const onDictItem = (rowData) => {
  dict.value = {...rowData}
  dictItemDialogVisible.value = true
}

const onDelete = (rowData) => {
  ElMessageBox.confirm('确定要删除这条数据吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    deleteById(rowData.id).then(() => {
      requestPageList()
    })
  }, () => {})
}
</script>

<template>
  <div class="cb-main-container">
    <div class="cb-common-box search-box">
      <el-form :model="search" ref="searchFormRef" inline size="large">
        <el-form-item label="名称" prop="name">
          <el-input v-model="search.name" placeholder="请输入字典名称" />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select placeholder="请选择状态" v-model="search.status" style="width: 200px">
            <el-option v-for="(item, index) in statusEnum" :key="index" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button icon="Refresh" @click="onReset">重置</el-button>
          <el-button type="primary" icon="Search" @click="onSearch">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="cb-common-box main-box">
      <div>
        <el-button type="primary" icon="Plus" @click="onAdd">新增</el-button>
      </div>
      <el-table :data="dictData" empty-text="暂无数据" size="large" class="cb-table-box">
        <el-table-column type="index" label="ID" />
        <el-table-column property="name" label="名称" />
        <el-table-column property="keyName" label="键名" />
        <el-table-column property="status" label="状态">
          <template #default="scope">
            <el-tag :type="scope.row.status === 1 ? 'primary' : 'info'">{{ scope.row.status === 1 ? '启用' : '禁用' }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column property="remark" label="备注" show-overflow-tooltip/>
        <el-table-column align="right" label="操作">
          <template #default="scope">
            <el-button link type="primary" icon="Edit" @click="onEdit(scope.row)">编辑</el-button>
            <el-button link type="primary" icon="Tickets" @click="onDictItem(scope.row)">字典项</el-button>
            <el-button link type="danger" icon="Delete" @click="onDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background layout="prev, pager, next" :total="search.total" :current-page="search.pageNum" style="margin-top: 16px" @current-change="handleCurrentChange" />
    </div>
  </div>

  <dict-dialog-form ref="dictDialogFormRef" v-model:visible="dictDialogFormVisible" :data="dict" @confirm="handelDictDialogFormConfirm"></dict-dialog-form>

  <dict-item-list-dialog v-model:visible="dictItemDialogVisible" :data="dict"></dict-item-list-dialog>
</template>

<style scoped lang="scss">
.cb-main-container {
  flex-direction: column;
}
</style>
